<template>
  <el-drawer
      v-model="props['show']"
      direction="ltr"
      @closed="emit('close')"
      :before-close="beforeClose"
  >
    <template #title>
      <div class="headerTitle">
        创建
      </div>
    </template>
    <div v-if="props['mode']===0" class="drawerBody">
      <el-form
          :model="empForm"
          label-width="200px"
          label-position="left"
          :rules="rules"
          ref="formEmp"
      >
        <el-form-item label="Name" prop="name">
          <el-input v-model="empForm.name"/>
        </el-form-item>
        <el-form-item label="Status" prop="status">
          <el-select v-model="empForm.status">
            <el-option label="在职" value="1"></el-option>
            <el-option label="兼职" value="2"></el-option>
            <el-option label="试用" value="3"></el-option>
            <el-option label="离职" value="4"></el-option>
            <el-option label="返聘" value="5"></el-option>
            <el-option label="退休" value="6"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="ArriveDate" prop="arriveDate">
          <el-date-picker
              v-model="empForm.arriveDate"
              type="date"
          />
        </el-form-item>
        <el-form-item label="WorkPlace" prop="position">
          <el-input v-model="empForm.position"/>
        </el-form-item>
        <el-form-item label="Job" prop="job">
          <el-input v-model="empForm.job"/>
        </el-form-item>
        <el-form-item label="DepartmentId" prop="departmentId">
          <el-input-number v-model="empForm.departmentId"/>
        </el-form-item>
        <el-button
            :style="{marginTop: '80px'}"
            type="primary"
            @click="submit(formEmp)"
            :loading="empLoading"
        >submit
        </el-button>
      </el-form>
    </div>
    <div v-else-if="props['mode']===1">
      <el-form
          ref="formDep"
          :model="depForm"
          label-width="200px"
          label-position="left"
          :rules="rules"
      >
        <el-form-item label="Name" prop="name">
          <el-input v-model="depForm.name"/>
        </el-form-item>
        <el-button
            :style="{marginTop: '80px'}"
            type="primary"
            @click="submit(formDep)"
            :loading="depLoading"
        >submit
        </el-button>
      </el-form>
    </div>
  </el-drawer>

</template>

<script setup>
import {reactive, ref} from "vue";
import {ElNotification} from "element-plus";
import axios from "axios";
import {useRoute} from "vue-router";


const PATH_MAP = ["createNewEmp", "createNewDep"]
const emit = defineEmits(["close", "getFilter","refreshData"])
const props = defineProps(["mode", "show", "data"])
const route=useRoute()


const empLoading = ref(false)
const depLoading = ref(false)


let empFormData = {
  name: '',
  status: '',
  arriveDate: '',
  position: '',
  job: '',
  departmentId: 0,
}
let depFormData = {
  name: ''
}
const empForm = reactive(empFormData)
const depForm = reactive(depFormData)
const formEmp = ref("form")
const formDep = ref("form")
const beforeClose = ref((done) => {
  done()
})

const submit = async (c) => {
  let data = null
  switch (props["mode"]) {
    case 0: {
      empLoading.value = true
      data = Object.assign({}, empFormData)
      data.arriveDate = data.arriveDate.toISOString().slice(0, 10)
      data.status = data.status * 1
      break;
    }
    case 1: {
      depLoading.value = true
      data = Object.assign({}, depFormData)
      break;
    }

  }
  beforeClose.value = () => {
  }
  let res = await new Promise((resolve) => {
    c.validate(res => {
      resolve(res)
    })
  })
  if (res === true) {
    try {
      await new Promise((resolve, reject) => {
        axios.post(import.meta.env.VITE_APP_BASE_URL + "/api/" + PATH_MAP[props["mode"]]+"?token="+route.query.token, JSON.stringify(data), {
          timeout: 1000,
          headers: {
            "Content-Type": "applications/json",
          },
        }).then(res => {
          if (res.status !== 200) {
            reject(res.status)
          }
          resolve(res)
        }).catch(err => {
          reject(err)
        })
      })
      ElNotification({
        title: 'success',
        message: 'create successfully',
      })
    } catch (e) {
      ElNotification({
        title: 'error',
        message: 'unknown error happen:' + e,
      })
    } finally {
      switch (props["mode"]) {
        case 0:
          empLoading.value = false
          break;
        case 1:
          depLoading.value = false
          break;
      }
      emit("refreshData")
      beforeClose.value = done => {
        done()
      }
    }

  }

}
const rules = reactive({
  name: [
    {
      required: true,
      message: "please input name",
      trigger: "blur",
    },
  ],
  status: [
    {
      type: "string",
      required: true,
      message: "please input status",
      trigger: "change"
    }
  ],
  arriveDate: [
    {
      type: 'date',
      required: true,
      message: "please input arriveDate",
      trigger: 'change',
    },
  ],
  position: [
    {
      required: true,
      message: "please input workplace",
      trigger: "blur"
    }
  ],
  job: [
    {
      required: true,
      message: "please input job",
      trigger: "blur"
    }
  ],
  departmentId: [
    {
      type: "number",
      required: true,
      message: "please input depId",
      trigger: "change"
    }
  ]
})

</script>

<style scoped>

</style>